<template>
    <view v-if="pageInit">
        <view class="projectSwiper">
            <u-swiper @click="previewImg" :list="detailObj.houseTypeImages" height="450" mode="number"></u-swiper>
        </view>
        <view class="infoContainer">
            <view class="title">
                <view class="left">
                    {{detailObj.name}}
                </view>
                <view v-if="detailObj.vrUrl" class="right" @click="gotoVrWeb">
                    VR看房>
                </view>
            </view>
            <view class="introWrapper">
                <view v-for="(tag,index1) in detailObj.tags" :key="index1" class="item">
                    {{tag}}
                </view>

            </view>
            <view class="bottomWrapper">
                <view class="item">
                    <view class="top">
                        {{detailObj.totalPrice||''}}
                    </view>

                    <view class="bottom">
                        售价
                    </view>
                </view>
                <view class="line">

                </view>
                <view class="item">
                    <view class="top">
                        {{detailObj.roomNumber}}室{{detailObj.hallNumber}}厅{{detailObj.toiletNumber}}卫
                    </view>
                    <view class="bottom">
                        房型
                    </view>
                </view>
                <view class="line">

                </view>
                <view class="item">
                    <view class="top">
                        {{detailObj.constructionArea}}m²
                    </view>
                    <view class="bottom">
                        建筑面积
                    </view>
                </view>
            </view>
        </view>
        <template v-if="detailObj.intro||detailObj.intro.length>0">
            <view class="titleContainer">
            	户型说明
            </view>
                 
            <view class="detailContainer">
                <text space="ensp">{{detailObj.intro}}</text>              
            </view> 
        </template>
 
           
        <view class="" style="height: 200rpx;">
            
        </view>   
        <share-button :backgroundBtn="'#5E9FFD'"
			@onShare="onShare"
		></share-button>
    </view>
</template>

<script>
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null
    

    export default {
        data() {
            return {
                detailId: '',
                detailObj: {
                    
                },
                pageInit:false,
            };
        },

        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        components: {
            
        },
        onLoad(options) {
            that = this;
            that.detailId = options.id
            that.getHouseTypeDetail();
        },
        onShow() {

        },

        methods: {
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setOrigin"]),

            getHouseTypeDetail() {
                let that = this
                api.getHouseTypeDetail({
                    param: {
                        id: that.detailId
                    }
                }).then(res => {
                    console.log(res)
                    if (res.success) {
              
                        var list = res.data.tags.split(',')
                        res.data.tags = list;
                        res.data.imageList = [];  
                        if (res.data.houseTypeImages&&res.data.houseTypeImages.length){
                            for (let i = 0; i < res.data.houseTypeImages.length; i++) {
                                var swiperObj = {
                                    image: '',
                                    title: ''
                                }
                                swiperObj.image = res.data.houseTypeImages[i];
                                res.data.imageList.push(swiperObj);
                            }
                        }
                        
                        if (res.data.intro&&res.data.intro.length>0){
                           res.data.intro = res.data.intro.replace(/\\n/g,'\n')
                        }   
                                          
                        that.detailObj = res.data
						
						that.shareTitleMixins  = that.detailObj.name||'';
						that.shareImageMixins = that.detailObj.converImage||'';
                        that.pageInit = true
                    }
                })
            },
            pushListShow(srcObj, pushlist) {
                if (pushlist && pushlist.length > 0) {

                }
            },
            previewImg(index) {       	
            	uni.previewImage({
            		current: index,
            		urls: that.detailObj.houseTypeImages,
            	});
            },
            gotoVrWeb(){
                console.log("gotoVrWeb")
                uni.navigateTo({
                    url:'./unitTypeDetailVr?id=' + that.detailId
                })          
            }
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #F3F3F3;
    }

    .projectSwiper {
        width: 750rpx;
        height: 450rpx;
    }

    .infoContainer {
        width: 750rpx;
        // height: 419rpx;
        background: #FFFFFF;
        padding: 0 48rpx;
        margin-top: 1px;
        .title {
            font-size: 36rpx;
            font-weight: 600;
            color: #1F1F1F;
            line-height: 50rpx;
            padding-top: 58rpx;
            display: flex;
            justify-content: space-between;
            width: 100%;
            .left{
                width: 350rpx;
            }
            .right{
                width: 190rpx;
                height: 60rpx;
                background-color: #F6784C;
                border-radius: 30rpx;
                color: #FFFFFF;
                line-height: 60rpx;
                text-align: center;
                font-size: 28rpx;
            }
        }

        .introWrapper {
            display: flex;
            flex-wrap: wrap;
            margin-right: 6rpx;
            width: 350rpx;
            margin-top: 31rpx;

            .item {
                padding: 0 10rpx;
                height: 36rpx;
                background: #F4F4F4;
                border-radius: 8rpx;
                font-size: 22rpx;
                color: #999999;
                line-height: 36rpx;
                text-align: center;
                margin-right: 6rpx;
            }
        }

        .bottomWrapper {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 88rpx;
            margin-top: 48rpx;

            .item {
                .top {
                    font-size: 38rpx;
                    font-weight: 600;
                    color: #F6784C;
                    line-height: 53rpx;
                    margin-bottom: 8rpx;
                }

                .bottom {
                    font-size: 24rpx;
                    color: #999999;
                    line-height: 33rpx;
                }
            }

            .line {
                height: 40rpx;
                width: 1px;
                background-color: #E7E7E7;
            }


        }
    }
    
    .bottomContainer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 750rpx;
        height: 122rpx;
        background: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: #F3F3F3 1px solid;
    
        .container {
            width: 500rpx;
            height: 74rpx;
            background: #5E9FFD;
            border-radius: 37rpx;
            font-size: 28rpx;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
    
            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 15rpx;
            }
        }
    }
    
    .titleContainer {
    	width: 128rpx;
    	height: 45rpx;
    	font-size: 32rpx;
    	font-family: PingFangSC-Medium, PingFang SC;
    	font-weight: 600;
    	color: #000000;
    	line-height: 45rpx;
    	margin-left: 30rpx;
    	margin-top: 32rpx;
    	margin-bottom: 32rpx;
    }
    .detailContainer{
        padding: 30rpx;
        margin-left: 18rpx;
        width: 714rpx;
        min-height: 200rpx;
        background: #FFFFFF;
        box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
        border-radius: 20rpx;
        color: #666666;
        margin-bottom: 30rpx;
        font-size: 28rpx;
        line-height: 42rpx;
    }
    
</style>
